<script setup>

    import { onMounted } from 'vue'
    import { getFacilityTodayDataCurve } from '@/api/agriculture'
    import * as echarts from "echarts"

    const props = defineProps({
        facId: {
            type: [Number, String],
            default: null
        }
    })

    let curvue = $ref(null)
    let eCharts = null

    // 数据加载中
    let dataLoading = $ref(true)

    onMounted(() => {
        getFacilityTodayDataCurve({ facId: props.facId }).then(res => {
            dataLoading = false
            if(res.success){
                let { timeList, details } = res.result
                curvueInit(timeList, details)
            }
        })
    })

    // 加载曲线图
    const curvueInit = (timeList, details) => {
        let legendData = []
        let data = details.map((item, index) => {
            let key = 'e' + (index + 1)
            legendData.push(item[key])
            return {
                    name: item[key],
                    data: item[key + 'valueList'],
                    type: 'line',
                    smooth: true
                }
        })

        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross'
                }
            },
            legend: {
                icon: 'circle',
                textStyle:{
                    fontSize: 12,//字体大小
                    color: '#ffffff'//字体颜色
                },
                data: legendData
            },
            xAxis: {
                type: 'category',
                axisTick: { show: true },
                axisLine: { show: true },
                axisLabel: {
                    textStyle: {
                        color: '#fff'      
                    }
                },
                data: timeList,

            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff'      
                    }
                },
            },
            series: data,
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 2,
                    // 最大的放大是图形的2%
                    maxSpan: 4,
                }, 
                {
                    start: 0,   
                    end: 20
                }
            ]
        }

        eCharts = echarts.init(curvue)
        eCharts.setOption(option)
    }

</script>

<template>
    <div class="curvue" ref="curvue" v-loading="dataLoading"></div>
</template>

<style lang="less" scoped>
    .curvue{
        width: 100%;
        height: 330px;
    }
</style>